<template>
   
	<view class="topcontent" :style="{height:statusBarHeight+titleBarHeight-10+'px'}">
	    <!-- 状态栏的占位 -->
	     <view class="boxAndTop" :style="{height:statusBarHeight+'px'}"></view> 
	    <!-- 标题栏 -->
	    <view class="uni-seleton" :style="{height:titleBarHeight+'px'}">
	        <view class="back-btn"><!-- titleBarHeight -->
	            <view class="back-btn-go" @click="navBack" :style="{lineHeight:titleBarHeight+'px'}" v-show="vshow==1?true:false">
	                <uni-icons type="back" size="25" :color="colorBar"></uni-icons>
	            </view>
	            <view class="top_bar_title" :style="{lineHeight:titleBarHeight+'px'}">
					<span v-if="imageBar"><image :src="imageBar" style="width: 126rpx;height: 50rpx;" ></image></span>
					<span v-if="titleBar">{{titleBar}}</span>
				</view>
	        </view>
	    </view>
		<!-- 需要添加占位符高度  状态栏高度+导航栏高度（否则下面tab会塌陷）
		 <view :style="{height: navBarHeight+'rpx'}"></view><!-- +navBarHeight -->
	</view>
</template>
 
<script>
    export default {
		props: {
			statusBarHeight:{
				type: Number,
				default: 0
			},
			titleBarHeight:{ 
				type: Number,
				default:0
			},
			imageBar:{
				type: String,
				default:''
			},
			titleBar:{
				type: String,
				default:''
			},
			colorBar:{
				type: String,
				default:'#fff'
			},
			vshow:{
				type:Number,
				default:0
			}
		}, 
        data() {
            return {
            }
        },
        onLoad() {
			
        },
        methods: {
            // 返回上一页
            navBack() {
                uni.navigateBack();
            }
        }
    }
</script>
 
<style lang='scss'>
	.topcontent{
		position: fixed;
		left: 0;
		top:0;
		z-index: 1;
		
		/*background: rgba(237, 237, 237, 0.9);
		backdrop-filter: blur(13.5914px);*/
	}
	.boxAndTop{
		
	}
    .back-btn {
		display: flex;
        .back-btn-go{
            left: 20rpx;
        }
        .top_bar_title {
			display: flex;
			justify-content: center;
            font-size: 34rpx;
			width: 100vw;
        }
    }
</style>